﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的IM</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        .list-block .item-subtitle {
            font-size: 0.5rem;
        }

        .list-block li {
            box-sizing: border-box;
            position: relative;
            margin-bottom: 0rem;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="page-group">
        <div id="router" class="page">
            <!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
            <div class="content">
                <div class="list-block" style="margin:0.5rem">
                    <ul>
                        <li>
                            <a href="#" class="item-link item-content">
                                <div class="item-media">
                                    <span class="icon icon-search"></span>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">发现</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="item-link item-content">
                                <div class="item-media">
                                    <span class="icon icon-share"></span>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">分享与邀请</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="item-link item-content open-popup" data-popup=".popup-about">
                                <div class="item-media">
                                    <span class="icon icon-download"></span>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">关于</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <div class="popup popup-about">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-right close-popup">
                关闭
            </a>
            <h1 class="title">关于SUI Mobile</h1>
        </header>
        <div class="content">
            <div class="content-inner">
                <div class="content-block">
                    <p>SUI Mobile 是阿里巴巴共享业务事业部SDC团队（UED）提供的一套手机UI库。</p>
                    <p>我们的目的是为手机千牛、百川以及任何手机端的H5页面提供标准的设计规范和前端实现。</p>
                    <p>SUI Mobile并没有重新发明轮子，我们主要参考了 <a href='http://goratchet.com' external target='_blank'>ratchet</a> 和 <a href='http://framework7.taobao.org/' external target='_blank'>Framework7</a></p>
                    <p>这里只是一个官方示例，详细文档请参考：<a href='http://m.sui.taobao.org/' external target='_blank'>http://m.sui.taobao.org/</a></p>
                    <p></p>
                    <p><a class="button close-popup">确定</a></p>
                </div>
            </div>
        </div>
    </div>

    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <!-- 默认必须要执行$.init(),实际业务里一般不会在HTML文档里执行，通常是在业务页面代码的最后执行 -->
    <script>
        $.init();
    </script>
</body>
</html>